<template>
  <!-- 项目分包台账 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData :searchData="searchArr" @search="search"></searchData>
    <!-- 表格 -->
    <a-card :bordered="false">
      <a-row type="flex" justify="space-between" align="middle">
        <title-name title="分包商列表"></title-name>
        <a-button type="primary" @click="$multiTab.close()">返回</a-button>
      </a-row>
      <!-- 汇总 -->
      <a-alert v-if="projectName" :showIcon="true" class="mb12">
        <template slot="message">
          <span style="margin-right: 12px">
            {{ projectName }}项目 分包商总共
            <a>
              <b>{{ total }}</b>
            </a>
            个
          </span>
        </template>
      </a-alert>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        show-size-changer
        show-quick-jumper
        showPagination="auto"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleManage(record)">人员管理</a>
        </template>
      </s-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import { getYzSubcontractor } from '@/api/project/projects' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置

const columns = [
  {
    title: '序号',
    index: 'index',
    width: 80,
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '分包商名称',
    dataIndex: 'subcontractors',
  },
  {
    title: '进场时间',
    dataIndex: 'entryTime',
  },
  {
    title: '出场时间',
    dataIndex: 'outTime',
  },
  {
    title: '状态',
    dataIndex: 'statusName',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  extends: new BaseEditPage(),
  name: 'projectSubcontractors',
  components: {
    STable,
  },
  data() {
    return {
      columns, // 表头
      total: 0, // 总分包商数
      searchArr: [
        {
          name: '分包商名称',
          value: 'subcontractorName',
          type: 'input',
        },
      ],
      projectName: '',
      queryParam: {}, // 查询参数
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam, { projectId: this.projectId })
        return getYzSubcontractor(requestParameters).then((res) => {
          this.total = res.totalSize
          this.projectName = res.data[0].projectName
          return res
        })
      },
    }
  },
  methods: {
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    /**
     * 人员管理
     */
    handleManage(e) {
      this.$router.push({
        path: '/subcontractors/employeeManage',
        query: {
          id: e.id,
          projectOrgId: e.projectOrgId,
        },
      })
    },
  },
}
</script>


